<!--
 * @FileDescription 
 * @Author lz
 * @Date 20230320 15:42:24
 * @LastEditors lz
 * @LastEditTime 20230320 15:42:24
-->
<template>
    <div class="ConBox_b">
        <div class="col_l">
            <div>
                <span class="tit">Components</span>
            </div>
            <div class="comListBox" v-if="HomeContent.Default.OptionTypeCorrect.value == true">
                <div class="com_l">
                    GNSS
                </div>
                <div class="com_r">
                    OK
                    <div class="ColorBlock"></div>
                </div>
            </div>
            <div class="comListBox" v-if="HomeContent.Default.OptionTypeCorrect.value == true">
                <div class="com_l">
                    Lidar 16
                </div>
                <div class="com_r">
                    FATAL
                    <div class="ColorBlock _err"></div>
                </div>
            </div>
            <div class="comListBox" v-if="HomeContent.Default.OptionTypeCorrect.value == true">
                <div class="com_l">
                    Localization
                </div>
                <div class="com_r">
                    FATAL
                    <div class="ColorBlock _err"></div>
                </div>
            </div>
            <div class="comListBox" v-if="HomeContent.Default.OptionTypeCorrect.value == true">
                <div class="com_l">
                    Recorder
                </div>
                <div class="com_r">
                    FATAL
                    <div class="ColorBlock _err"></div>
                </div>
            </div>
        </div>
        <div class="col_r">
            <div>
                <span class="tit">Modules</span>
            </div>
            <div class="switchBox" v-for="(item, index) in state.StatusList " :key="index"
                v-if="HomeContent.Default.OptionTypeCorrect.value == true">
                <a-switch v-model:checked="item.checked" @click="swithClick(item.checked, index)" />{{ item.name }}
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, isReactive, Ref } from 'vue'
import HomeContent from '../../HomeContent';
const state = reactive({
    StatusList: [
        { name: 'Camera', checked: false },
        { name: 'Camera Perception', checked: false },
        { name: 'Canbus', checked: false },
        { name: 'Control', checked: false },
        { name: 'GPS', checked: false },
        { name: 'Guardian', checked: false },
        { name: 'Lidar', checked: false },

        { name: 'Lidar Perception', checked: false },
        { name: 'Localization', checked: false },
        { name: 'Planning', checked: false },
        { name: 'Prediction', checked: false },
        { name: 'Radar', checked: false },
        { name: 'Recorder', checked: false },
        { name: 'Routing', checked: false },

        { name: 'SmarterEye', checked: false },
        { name: 'TaskManager', checked: false },
        { name: 'Third Party Perception', checked: false },
        { name: 'Traffic Light', checked: false },
        { name: 'Transform', checked: false },
        { name: 'v2x', checked: false },
        { name: 'RTK Player', checked: false },
        { name: 'RTK Recorder', checked: false },
    ]
});
async function swithClick(checked: any, index: any) {
    console.log(checked, index);
    console.log(state.StatusList[index].name);
    if (index == 4) {
        HomeContent.Default.REMBack.value ++
    }
    if (checked == true) {
        await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackOpenModuleRequest(state.StatusList[index].name))

        // if (index == 2) {
        //     await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackOpenModuleRequest(state.StatusList[index].name))
        // } else if (index == 4) {
        //     await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackOpenModuleRequest(state.StatusList[index].name))
        // } else if (index == 8) {
        //     await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackOpenModuleRequest(state.StatusList[index].name))
        // } else if (index == 21) {
        //     await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackOpenModuleRequest(state.StatusList[index].name))
        // }
    } else if (checked == false) {
        await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackCloseModuleRequest(state.StatusList[index].name))

        // if (index == 2) {
        //     await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackCloseModuleRequest(state.StatusList[index].name))
        // } else if (index == 4) {
        //     await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackCloseModuleRequest(state.StatusList[index].name))
        // } else if (index == 8) {
        //     await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackCloseModuleRequest(state.StatusList[index].name))
        // } else if (index == 21) {
        //     await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackCloseModuleRequest(state.StatusList[index].name))
        // }
    }

}
</script>

<style scoped>
.ConBox_b {
    width: 1764px;
    height: 364px;
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    background-color: #020D15;
    padding-left: 2px;
}

.col_l {
    width: 308px;
    height: 364px;
    padding-left: 22px;
    background: #1A2225;
}

.col_r {
    width: 1450px;
    height: 364px;
    background: #1A2225;
    margin-left: 3px;
    padding-left: 22px;
}

.tit {
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    padding-bottom: 8px;
    line-height: 44px;
    border-bottom: 2px solid #626A6D;
}

.com_r {
    width: 152px;
    height: 40px;
    background: #000000;
    float: right;
    margin-right: 31px;
    margin-top: 6px;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 38px;
    padding-left: 11px;
}

.comListBox {
    overflow: hidden;
}

.com_l {
    float: left;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 50px;
    margin-left: 12px;
}

.ColorBlock {
    float: right;
    width: 15px;
    height: 15px;
    background: #009965;
    margin-top: 13px;
    margin-right: 11px;
}

._err {
    background: #C3101B;
}

.switchBox {
    width: 16.6%;
    float: left;
    font-size: 16px;
    font-weight: 500;
    color: #929B9E;
    line-height: 40px;
}

:deep().ant-switch {
    margin-right: 12px;
    border-radius: 0;
    margin-top: -3px;
    background: #40464A;
}

:deep().ant-switch-checked {
    background: #1E3C50;
}

:deep().ant-switch-handle::before {
    border-radius: 0;
    background: #9EA6A8;
}

:deep().ant-switch-checked>.ant-switch-handle::before {
    background-color: #3AA4FB;
}

:deep().ant-switch-handle {
    width: 16px;
    height: 16px;
    top: 3.2px;
}
</style>